<template>
  <div>
    <SearchTable
      v-bind="$attrs"
      :searchSchame="approveSearchSchame"
      :tableColumns="tableColumns"
      :api="getCoordinationApplicationApproveList"
      :listPermission="CoordinationApprovePermission.LIST"
      :dealSearchParams="dealSearchParams"
      :defaultQuery="defaultQuery"
      sortField="apply_time"
      ref="tableRef"
    >
      <template #actions>
        <TableColumn label="操作" fixed="right" :width="140">
          <template #default="{ row }">
            <el-button
              v-if="
                userStore.hasApprovePermission(row.approveUserId) &&
                row.applyStatus === EMatterTodoStatus.待办理
              "
              type="primary"
              size="small"
              @click="coordinationDetail.show(row.id, EDetailType.APPROVE)"
            >
              审核
            </el-button>
          </template>
        </TableColumn>
      </template>
    </SearchTable>
    <CoordinationDetail ref="coordinationDetail" @update="updateList" />
  </div>
</template>

<script lang="ts" setup>
import { useTemplateRef } from 'vue'
import SearchTable from '@/components/table/SearchTable.vue'
import { CoordinationApprovePermission } from '@/type/permission'
import { getCoordinationApplicationApproveList } from '@/api/application/coordination'
import TableColumn from '@/components/table/TableColumn.vue'
import CoordinationDetail from './CoordinationDetail.vue'
import { useUserStore } from '@/stores/user'
import { EDetailType } from '../typings'
import {
  generateTableColumn,
  dealSearchParams,
  approveSearchSchame,
} from './util'
import { EMatterTodoStatus } from '@/components/statusShow/util'

const userStore = useUserStore()

const defaultQuery = {
  status: EMatterTodoStatus.待办理,
}

const coordinationDetail =
  useTemplateRef<InstanceType<typeof CoordinationDetail>>('coordinationDetail')

const tableRef = useTemplateRef<InstanceType<typeof SearchTable>>('tableRef')

const tableColumns = generateTableColumn(tableColumnClick, true)

// 列表项点击
function tableColumnClick(columnType: string, row: Record<string, any>) {
  if (columnType === 'applyTopic') {
    coordinationDetail?.value.show(row.id)
  }
}

// 更新列表
function updateList() {
  tableRef.value?.getInfo()
}
</script>
